<template>
  <Form :data="model" @ok="onOk" ok-msg="保存成功">
    <FormItem field="appId" title="应用" required help="创建后不可修改">
      <AppCascader v-model="model.appId" :disabled="!!modal?.id" />
    </FormItem>
    <FormItem field="name" title="名称" required>
      <Input v-model="model.name" />
    </FormItem>
    <FormItem field="key" title="Key" required>
      <Input v-model="model.key" />
    </FormItem>
    <FormItem field="remark" title="备注">
      <Input v-model="model.remark" />
    </FormItem>
    <template #op>
      <ModalButton :loading="loading" />
    </template>
  </Form>
</template>

<script setup lang="ts">
import { Form, FormItem, Input, Message, Modal, ModalButton } from '@idmy/ui'
import { useLoading } from '@idmy/core'
import { reactive } from 'vue'

import { createOrUpdateRole } from './services'

const props = defineProps({ modal: Object })
const model = reactive(props.modal ?? {})

const [onOk, loading] = useLoading(async () => {
  await createOrUpdateRole(model)
  Message.success('保存成功')
  Modal.ok(model)
})
</script>
